<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩粒子动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: radial-gradient(circle at center, #0a0a0a, #000000);
            min-height: 100vh;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            cursor: none;
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hover-zone {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: linear-gradient(45deg, 
                rgba(255, 0, 128, 0.1), 
                rgba(0, 255, 255, 0.1), 
                rgba(255, 128, 0, 0.1), 
                rgba(128, 0, 255, 0.1));
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .hover-zone:hover {
            transform: scale(1.1);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
        }

        .hover-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            text-align: center;
            pointer-events: none;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }

        .particle.glow {
            box-shadow: 0 0 6px currentColor;
        }

        .love-text {
            position: absolute;
            font-size: 48px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            pointer-events: none;
            z-index: 1000;
            opacity: 0;
            transform: scale(0);
            text-align: center;
            animation: textAppear 2s ease-out forwards;
        }

        @keyframes textAppear {
            0% {
                opacity: 0;
                transform: scale(0) rotate(0deg);
            }
            50% {
                opacity: 1;
                transform: scale(1.2) rotate(180deg);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(360deg);
            }
        }

        @keyframes floatUp {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--dx), var(--dy)) scale(0);
                opacity: 0;
            }
        }

        @keyframes spiral {
            0% {
                transform: rotate(0deg) translateX(0px) scale(1);
                opacity: 1;
            }
            100% {
                transform: rotate(720deg) translateX(var(--spiral-radius)) scale(0);
                opacity: 0;
            }
        }

        @keyframes pulseGlow {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.7;
            }
        }

        @keyframes streamLine {
            0% {
                width: 0;
                opacity: 1;
            }
            50% {
                width: 100px;
                opacity: 0.8;
            }
            100% {
                width: 200px;
                opacity: 0;
            }
        }

        .stream-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fff, transparent);
            pointer-events: none;
            z-index: 999;
            animation: streamLine 1.5s ease-out forwards;
        }

        .cursor-glow {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
            pointer-events: none;
            z-index: 100;
            transition: all 0.1s ease;
        }

        .return-arrow {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .return-arrow:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        .return-arrow::before {
            content: '';
            width: 12px;
            height: 12px;
            border-left: 2px solid white;
            border-bottom: 2px solid white;
            transform: rotate(45deg);
            margin-right: -4px;
        }
    </style>
</head>
<body>
    <a href="index.html" class="return-arrow" title="返回首页"></a>
    
    <div class="container">
        <div class="hover-zone">
            <div class="hover-text">将鼠标悬停在这里<br>观看炫彩粒子动画</div>
        </div>
        <div class="cursor-glow"></div>
    </div>

    <script>
        const container = document.querySelector('.container');
        const hoverZone = document.querySelector('.hover-zone');
        const cursorGlow = document.querySelector('.cursor-glow');
        
        const colors = [
            '#FF006E', '#FB5607', '#FFBE0B', '#8338EC', '#3A86FF',
            '#06FFB4', '#FF4365', '#00F5FF', '#FF6B6B', '#4ECDC4',
            '#45B7D1', '#96CEB4', '#FECA57', '#FF9FF3', '#54A0FF',
            '#5F27CD', '#00D2D3', '#FF9F43', '#EE5A24', '#0097E6'
        ];

        let isHovering = false;
        let animationFrame;

        // 鼠标移动跟踪
        document.addEventListener('mousemove', (e) => {
            cursorGlow.style.left = e.clientX - 10 + 'px';
            cursorGlow.style.top = e.clientY - 10 + 'px';
        });

        // 创建粒子
        function createParticle(x, y, color = null) {
            const particle = document.createElement('div');
            particle.className = 'particle glow';
            
            const particleColor = color || colors[Math.floor(Math.random() * colors.length)];
            particle.style.backgroundColor = particleColor;
            particle.style.color = particleColor;
            
            const size = Math.random() * 8 + 2;
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            
            particle.style.left = x + 'px';
            particle.style.top = y + 'px';
            
            // 随机动画类型
            const animType = Math.random();
            const duration = Math.random() * 2000 + 1000;
            
            if (animType < 0.5) {
                // 直线上升动画
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 200 + 100;
                particle.style.setProperty('--dx', Math.cos(angle) * distance + 'px');
                particle.style.setProperty('--dy', Math.sin(angle) * distance + 'px');
                particle.style.animation = `floatUp ${duration}ms ease-out forwards`;
            } else {
                // 螺旋动画
                const spiralRadius = Math.random() * 150 + 50;
                particle.style.setProperty('--spiral-radius', spiralRadius + 'px');
                particle.style.animation = `spiral ${duration}ms ease-out forwards`;
            }
            
            // 添加脉动效果
            if (Math.random() > 0.7) {
                particle.style.animation += `, pulseGlow ${Math.random() * 500 + 300}ms ease-in-out`;
            }
            
            container.appendChild(particle);
            
            // 动画结束后移除粒子
            setTimeout(() => {
                if (particle.parentNode) {
                    particle.parentNode.removeChild(particle);
                }
            }, duration);
        }

        // 创建流线效果
        function createStreamLine(x, y, angle) {
            const stream = document.createElement('div');
            stream.className = 'stream-line';
            stream.style.left = x + 'px';
            stream.style.top = y + 'px';
            stream.style.transform = `rotate(${angle}deg)`;
            stream.style.transformOrigin = 'left center';
            
            container.appendChild(stream);
            
            setTimeout(() => {
                if (stream.parentNode) {
                    stream.parentNode.removeChild(stream);
                }
            }, 1500);
        }

        // 创建彩色文字
        function createLoveText(x, y) {
            const text = document.createElement('div');
            text.className = 'love-text';
            text.innerHTML = 'I Love Rich Liu';
            text.style.left = (x - 150) + 'px';
            text.style.top = (y - 30) + 'px';
            
            // 彩虹渐变文字颜色
            const gradientColors = ['#ff0000', '#ff8000', '#ffff00', '#00ff00', '#0080ff', '#8000ff'];
            let colorIndex = 0;
            
            const colorInterval = setInterval(() => {
                text.style.color = gradientColors[colorIndex % gradientColors.length];
                text.style.textShadow = `0 0 20px ${gradientColors[colorIndex % gradientColors.length]}`;
                colorIndex++;
            }, 200);
            
            container.appendChild(text);
            
            // 2秒后移除文字和颜色变化
            setTimeout(() => {
                clearInterval(colorInterval);
                setTimeout(() => {
                    if (text.parentNode) {
                        text.parentNode.removeChild(text);
                    }
                }, 1000);
            }, 2000);
        }

        // 粒子爆发效果
        function particleBurst(x, y, count = null, specificColor = null) {
            const burstCount = count || Math.floor(Math.random() * 15 + 10);
            for (let i = 0; i < burstCount; i++) {
                setTimeout(() => {
                    const offsetX = (Math.random() - 0.5) * 50;
                    const offsetY = (Math.random() - 0.5) * 50;
                    createParticle(x + offsetX, y + offsetY, specificColor);
                }, i * 30);
            }
        }

        // 创建光环效果
        function createLightRing(x, y) {
            const ringCount = 3;
            for (let i = 0; i < ringCount; i++) {
                setTimeout(() => {
                    const ring = document.createElement('div');
                    ring.style.position = 'absolute';
                    ring.style.width = '100px';
                    ring.style.height = '100px';
                    ring.style.borderRadius = '50%';
                    ring.style.border = '2px solid rgba(255, 255, 255, 0.8)';
                    ring.style.left = (x - 50) + 'px';
                    ring.style.top = (y - 50) + 'px';
                    ring.style.pointerEvents = 'none';
                    ring.style.zIndex = '998';
                    ring.style.animation = 'pulseGlow 1s ease-out forwards';
                    
                    container.appendChild(ring);
                    
                    setTimeout(() => {
                        if (ring.parentNode) {
                            ring.parentNode.removeChild(ring);
                        }
                    }, 1000);
                }, i * 100);
            }
        }

        // 创建光线爆炸
        function createLightBurst(x, y) {
            const rayCount = 12;
            for (let i = 0; i < rayCount; i++) {
                const angle = (i / rayCount) * 360;
                createStreamLine(x, y, angle);
            }
        }

        // 连续粒子生成
        function continuousParticles(x, y) {
            if (!isHovering) return;
            
            const offsetX = (Math.random() - 0.5) * 100;
            const offsetY = (Math.random() - 0.5) * 100;
            createParticle(x + offsetX, y + offsetY);
            
            animationFrame = setTimeout(() => {
                continuousParticles(x, y);
            }, 100);
        }

        // 悬停事件
        hoverZone.addEventListener('mouseenter', (e) => {
            isHovering = true;
            const rect = hoverZone.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            // 初始爆发
            particleBurst(centerX, centerY);
            
            // 开始连续生成
            continuousParticles(centerX, centerY);
        });

        hoverZone.addEventListener('mouseleave', (e) => {
            isHovering = false;
            if (animationFrame) {
                clearTimeout(animationFrame);
            }
            
            // 鼠标移出时的爆炸效果
            const rect = hoverZone.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            // 更大的爆炸效果
            const exitBurstCount = 25;
            for (let i = 0; i < exitBurstCount; i++) {
                setTimeout(() => {
                    const angle = (i / exitBurstCount) * Math.PI * 2;
                    const distance = Math.random() * 250 + 150;
                    const x = centerX + Math.cos(angle) * distance * 0.3;
                    const y = centerY + Math.sin(angle) * distance * 0.3;
                    
                    // 创建向外扩散的粒子
                    const particle = document.createElement('div');
                    particle.className = 'particle glow';
                    
                    const color = colors[Math.floor(Math.random() * colors.length)];
                    particle.style.backgroundColor = color;
                    particle.style.color = color;
                    
                    const size = Math.random() * 12 + 4;
                    particle.style.width = size + 'px';
                    particle.style.height = size + 'px';
                    
                    particle.style.left = centerX + 'px';
                    particle.style.top = centerY + 'px';
                    
                    const duration = Math.random() * 1000 + 800;
                    particle.style.setProperty('--dx', Math.cos(angle) * distance + 'px');
                    particle.style.setProperty('--dy', Math.sin(angle) * distance + 'px');
                    particle.style.animation = `floatUp ${duration}ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards`;
                    
                    container.appendChild(particle);
                    
                    setTimeout(() => {
                        if (particle.parentNode) {
                            particle.parentNode.removeChild(particle);
                        }
                    }, duration);
                }, i * 20);
            }
            
            // 额外的中心爆炸
            setTimeout(() => {
                particleBurst(centerX, centerY);
            }, 200);
        });

        // 鼠标在悬停区域移动时产生轨迹
        hoverZone.addEventListener('mousemove', (e) => {
            if (isHovering && Math.random() > 0.7) {
                createParticle(e.clientX, e.clientY);
            }
        });

        // 背景星星效果
        function createBackgroundStars() {
            for (let i = 0; i < 50; i++) {
                const star = document.createElement('div');
                star.style.position = 'absolute';
                star.style.width = '1px';
                star.style.height = '1px';
                star.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
                star.style.borderRadius = '50%';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.animation = `floatUp ${Math.random() * 3000 + 2000}ms ease-in-out infinite`;
                star.style.animationDelay = Math.random() * 2000 + 'ms';
                container.appendChild(star);
            }
        }

        // 初始化背景星星
        createBackgroundStars();

        // 点击效果 - 增强版
        document.addEventListener('click', (e) => {
            const x = e.clientX;
            const y = e.clientY;
            
            // 显示彩色文字
            createLoveText(x, y);
            
            // 创建光线爆炸
            createLightBurst(x, y);
            
            // 创建光环效果
            createLightRing(x, y);
            
            // 创建大型粒子爆发
            particleBurst(x, y, 30);
            
            // 创建彩色粒子环
            const colorRingCount = 20;
            for (let i = 0; i < colorRingCount; i++) {
                setTimeout(() => {
                    const angle = (i / colorRingCount) * Math.PI * 2;
                    const radius = 50 + i * 5;
                    const px = x + Math.cos(angle) * radius;
                    const py = y + Math.sin(angle) * radius;
                    const color = colors[i % colors.length];
                    createParticle(px, py, color);
                }, i * 20);
            }
        });
    </script>
</body>
</html>